import on from '@feidao-factory/core/on';
import z_index from './z-index';

export enum ConfirmResult {
	YES = 'yes',
	NO = 'no',
	CANCEL = 'cancel'
}

/**
 * 确认提示
 * @param content 确认提示
 * @param title 提示标题上的文字
 * @param yes 确认按钮上的文字
 * @param no 取消按钮上的文字
 * @param background 背景颜色，默认为：#1890ff
 * @example confirm(content, title, yes, no);
 */
export default function confirm(content: string, title: string, yes: string, no: string, background = '#1890ff') {
	const icon = '<img style="width:40px;height:40px" src="" />';
	const icon_close = '<img style="width:20px;height:20px" src="" />';
	const html = `<div style="background:rgba(0,0,0,.3);height:100%;width:100%;position:fixed;top:0;left:0;"><div style="margin-left:-200px;width:450px;top:30%;background:#fff;position:fixed;left:50%;border-radius:4px;overflow:hidden;"><div style="height:40px;line-height:40px;background:${background};padding-left:10px;font-size:14px;color:#fff;"><i style="width:40px;float:right;text-align:center;cursor:pointer;font-size:18px;" title="close" data-id="close">${icon_close}</i>${title}</div><div style="margin-top:35px;line-height:40px;text-align:center;font-size:14px;color:#666;display:flex;"><i style="color:#ffc107;font-size:28px;vertical-align:middle;margin-right:10px;display:flex;flex-direction:column;justify-content:center;    padding-left:30px;">${icon}</i><span style="font-size:14px;padding-right:50px;margin: 0 auto;">${content}</span></div><div style="margin-top:35px;margin-bottom:35px;font-size:14px;text-align:center;"><input type="button" data-id="ok" style="background:${background};width:100px;height:30px;line-height:30px;border:none;border-radius:4px;cursor:pointer;color:#fff;" value="${yes}"><input type="button" data-id="cancel" style="margin-left:35px;cursor:pointer;background:#f4f4f4;width:100px;height:30px;line-height:28px;border:1px solid #ddd;border-radius:4px;" value="${no}"></div></div></div>`;
	return new Promise<ConfirmResult>((resolve) => {
		const container = window.document.createElement('div');
		container.style.position = 'fixed';
		container.style.zIndex = z_index();
		window.document.body.appendChild(container);
		container.insertAdjacentHTML('beforeend', html);
		const ok = container.querySelector<HTMLInputElement>('[data-id=ok]')!;
		const cancel = container.querySelector<HTMLInputElement>('[data-id=cancel]')!;
		const close = container.querySelector<HTMLDivElement>('[data-id=close]')!;
		const h1 = on(ok, 'click', () => {
			destroy();
			resolve(ConfirmResult.YES);
		});
		const h2 = on(cancel, 'click', () => {
			destroy();
			resolve(ConfirmResult.NO);
		});
		const h3 = on(close, 'click', () => {
			destroy();
			resolve(ConfirmResult.CANCEL);
		});
		const h4 = on(window, 'keydown', (e: KeyboardEvent) => {
			if (e.keyCode === 27) {
				destroy();
				resolve(ConfirmResult.CANCEL);
			}
		});
		function destroy() {
			h1.destroy();
			h2.destroy();
			h3.destroy();
			h4.destroy();
			window.document.body.removeChild(container);
		}
	});
}
